import React from 'react';
import ReactDOM from 'react-dom';
import Select from 'react-select';

export function CItem(props) {
    let btn;
    let modal;
    if (JSON.parse(props.item.specifications).length == 0) {
        btn = <>
            {(props.item.minQuantity > 1) ? (<small style={{ padding: '0 10px' }}>{props.item.minQuantity} 份起售</small>) : ''}
            <button type="button" onClick={() => { props.handleAdd(props.item) }} className="btn btn-sm btn-outline-primary">+ 添加</button>
        </>;
        modal = <span></span>;
    } else {
        btn = <button type="button" onClick={() => { props.handleChooseSpec() }}
            className="btn btn-sm btn-outline-primary" data-toggle="modal" data-target={"#modal-" + props.item.id}>+ 选规格</button>
        modal = <SpecModal
            id={"modal-" + props.item.id}
            title={props.item.name}
            specs={props.item.specifications}
            item={props.item}
            handleAdd={props.handleAdd}
        ></SpecModal>
    }

    if (props.disableAdd == true) {
        btn = ''
    }

    return (
        <>
            <div className="card" style={{ border: 'transparent', display: 'flex', flexDirection: 'row', alignItems: 'center', margin: '10px 0' }}>
                <img src={props.item.image} width="100px" height="100px"></img>
                <div style={{ padding: '0 10px', display: 'flex', flexDirection: 'column', minHeight: '102px', flex: '1' }}>
                    <h5>{props.item.name}</h5>
                    <small style={{ color: 'grey', display: 'block', flex: '1' }}>{props.item.description}</small>
                    <span style={{ display: 'block', color: 'red', fontSize: '18px', fontWeight: 'bold' }}>
                        <span style={{ fontSize: '10px' }}>￥</span>{props.item.price}</span>
                </div>
                {btn}
            </div>
            {modal}
        </>
    );
}


class SpecModal extends React.Component {

    constructor(props) {
        super(props);

        let specs = JSON.parse(this.props.specs);
        let s = [];
        for (var i = 0; i < specs.length; i++) {

            let k = '';
            for (var key in specs[i].spec) {
                k = key;
                break;
            }
            s[specs[i].name] = k;
        }

        this.state = {
            s: s
        };

        this.handleChange = this.handleChange.bind(this);
        this.confirm = this.confirm.bind(this);
    }

    handleChange(option) {
        const key = option.value;
        const v = option.label;
        let newS = this.state.s;
        newS[key] = v;
        this.setState({
            s: newS
        })
    }

    confirm() {
        // 拼接Spec
        let additional = 0.0;
        let desc = '';

        let specs = JSON.parse(this.props.specs);

        for (var i = 0; i < specs.length; i++) {
            desc = desc + this.state.s[specs[i].name] + '/';
            additional += specs[i].spec[this.state.s[specs[i].name]]
        }

        desc = desc.substring(0, desc.length - 1);

        const item = this.props.item;
        this.props.handleAdd({
            id: item.id,
            name: item.name,
            image: item.image,
            price: item.price + additional,
            packPrice: item.packPrice,
            spec: desc,
            quantity: 1,
            minQuantity: item.minQuantity
        });
    }

    render() {

        let specs = JSON.parse(this.props.specs);

        let form = specs.map((s) => {
            let specs = s.spec;
            let options = [];
            let defaultValue = '';
            for (var key in specs) {
                if (defaultValue == '') {
                    defaultValue = key;
                }
                options.push({
                    value: s.name, label: key
                });
            }

            return <div key={"modal-select-" + s.name}>
                <small>{s.name}</small>
                <Select
                    value={this.state.s[s.name]}
                    onChange={this.handleChange}
                    options={options}
                    placeholder={this.state.s[s.name]}
                />
            </div>
        })

        return (
            <div className="modal fade" id={this.props.id}>
                <div className="modal-dialog modal-sm">

                    <form>
                        <div className="modal-content">
                            <div className="modal-header">
                                <h4 className="modal-title">{this.props.title}</h4>
                                <button type="button" className="close" data-dismiss="modal">&times;</button>
                            </div>

                            <div className="modal-body">
                                {form}
                            </div>

                            <div className="modal-footer">
                                <button type="button" className="btn btn-secondary" data-dismiss="modal">关闭</button>
                                <button type="button" onClick={() => { this.confirm() }} className="btn btn-success" data-dismiss="modal">选好了</button>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
        );
    }
}